<template>
   
    <div class="container">
      <v-title :title="title"></v-title>
      <div class="chars_list">
        <p-chars :title="name1" :data="capacityData"></p-chars>
        <column-line-chars :title="name2" :data="capacityList"></column-line-chars>
        <p-chars :title="name3" :data="outputValueData"></p-chars>
      </div>
      <div class="chars_list bottom_list">
        <scroll-table :title="name4" :tableData="capacityTable" :desc="desc1"></scroll-table>
        <column-line-chars :title="name5" :data="outputValueList"></column-line-chars>
        <scroll-table :title="name6" :tableData="outputTable" :desc="desc2"></scroll-table>
      </div>
      <!-- <div class="right" @click="next">></div>
      <div class="left" @click="prev">&lt;</div> -->
    </div>
</template>

<script>
import title from "../title/v-title.vue";
import pChars from "../echars/p-chars/p-chars.vue";
import columnLineChars from "../echars/column-line-chars/column-line-chars.vue";
import scollTable from "../scroll-table/scroll-table.vue";
import {getQuarter} from '../../api/getEcharsData'
import {time} from './config.js'
import { mapMutations } from "vuex";
import { mapGetters } from "vuex";
export default {
 
  data() {
    return {
      title: '当前季度产值产能分析',
      name1: '班组产能',
      name2: '产能',
      name3: '班组产值',
      name4: '产能',
      name5: '产值',
      name6: '产值',
      desc1: '我是备注1',
      desc2: '我是备注2',
      showLoading: true,
      capacityData: [], //饼图产能
      capacityList: {}, //产能柱形折线图
      capacityTable: [], //产能记录table
      outputValueData: [], // 饼图产值
      outputValueList: {}, //产值柱形折线图,
      outputTable:[], //产值记录table
      
    };
  },
  components: {
    "v-title": title,
    "p-chars": pChars,
    "column-line-chars": columnLineChars,
    "scroll-table": scollTable,
  },
  computed: {
    ...mapGetters(["resize"])
  },
  mounted() {
    this.showLoading = false;
    window.onresize = () => {
      this.setSize(!this.resize);
    };
    this.getData();
  },
  methods: {
    getData(){
      getQuarter().then(res => {
        let { data } = res
        let year = [] //年份
        let name = [];//班组
        let capacityTarget = []//产能目标
        let capacityCompleted = []//产能完成
        let capacityAchievement = []//产能达成率
        let productivityDifference = [] //产能差异
        
        let outputValueCompleted = [] //产值完成
        let outputTarget = [] //产值目标
        let productFulfillment = [] //产值达成率
        let outputDiffernce = [] //产值差异

        
        data.map(item => {
         year.push(item.year)
         name.push(item.name)
         capacityCompleted.push(item.capacityCompleted)
         capacityTarget.push(item.capacityTarget)
         capacityAchievement.push(item.capacityAchievement)
         productivityDifference.push(item.productivityDifference)
         outputValueCompleted.push(item.outputValueCompleted)
         outputTarget.push(item.outputTarget)
         productFulfillment.push(item.productFulfillment)
         outputDiffernce.push(item.outputDiffernce)
        })
        let dataObj = {
          capacityCompleted,
          capacityTarget,
          capacityAchievement,
          productivityDifference,
          outputValueCompleted,
          outputTarget,
          productFulfillment,
          outputDiffernce,
        }
        let capacityDataFun = ((val) => {
          let list = []
          data.map(item => {
            let obj = {
              name: `${item.name}`,
              value: item[val]
            }
            list.push(obj)
          })
          return list
        })

        this.capacityData = capacityDataFun("capacityCompleted");
        this.outputValueData = capacityDataFun('outputValueCompleted')
        
        this.capacityList = {
         target: capacityTarget,
         complete: capacityCompleted,
         achievement: capacityAchievement,
         difference: productivityDifference,
         name: name,
         year: year
        }

        this.outputValueList = {
          target: outputTarget,
          complete: outputValueCompleted,
          achievement: productFulfillment,
          difference: outputDiffernce,
          name: name
        }
        
        const tableFun =((val1,val2,val3) => {
          let list = []
          data.map(item => {
            let obj = {
              name: item.name,
              target: item[val1],
              complete: item[val2],
              difference: item[val3],
            }
            list.push(obj)
          })
          return list
        })

        this.capacityTable = tableFun('capacityTarget','capacityCompleted','capacityAchievement')
        this.outputTable = tableFun('outputTarget','outputValueCompleted','productFulfillment')
      })
    },

    ...mapMutations({
      setSize: "SET_RESIZE"
    })
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #000d4a url("../../assets/img/bg.jpg") no-repeat center top;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .bottom_list{
    margin-top: 1vh
  }
  .chars_list {
    display: flex;
    justify-content: space-around;
  }
}
.loading{
    position: fixed;
    left: 0;
    top: 0;
    font-size: 16px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
    .loadingbox{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      img{
        width:40px;
      }
    }
  }
  
  .right{
    position: absolute;
    cursor: pointer;
    background: rgba(255,255,255,.1);
    right: 0px;
    top: 50%;
    font-size: 24px;
    padding: 15px 20px;
    color: #fff;
  }
  .left{
    position: absolute;
    cursor: pointer;
    background: rgba(255,255,255,.1);
    left: 0px;
    top: 50%;
    font-size: 24px;
    padding: 15px 20px;
    color: #fff;
  }
</style>